'use client'

import { useState } from 'react'
import Link from 'next/link'

export default function AIChat() {
  const [messages, setMessages] = useState<Array<{ role: 'user' | 'assistant', content: string }>>([])
  const [input, setInput] = useState('')
  const [isLoading, setIsLoading] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!input.trim()) return

    const newMessage = { role: 'user' as const, content: input }
    setMessages(prev => [...prev, newMessage])
    setInput('')
    setIsLoading(true)

    try {
      // 这里需要替换为实际的 API 调用
      const response = await fetch('/api/chat', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          messages: [...messages, newMessage],
        }),
      })

      const data = await response.json()
      setMessages(prev => [...prev, { role: 'assistant', content: data.message }])
    } catch (error) {
      console.error('Error:', error)
      setMessages(prev => [...prev, { role: 'assistant', content: '抱歉，发生了错误，请稍后再试。' }])
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <main className="min-h-screen bg-gradient-to-b from-blue-50 to-white">
      {/* 导航栏 */}
      <nav className="bg-white shadow-md">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex">
              <div className="flex-shrink-0 flex items-center">
                <h1 className="text-2xl font-bold text-blue-600">坐骨神经痛助手</h1>
              </div>
              <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
                <Link href="/" className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                  首页
                </Link>
                <Link href="/knowledge" className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                  知识库
                </Link>
                <Link href="/ai-chat" className="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                  AI 对话
                </Link>
                <Link href="/exercises" className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                  锻炼建议
                </Link>
              </div>
            </div>
          </div>
        </div>
      </nav>

      {/* 主要内容 */}
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="text-center mb-8">
          <h2 className="text-3xl font-extrabold text-gray-900 sm:text-4xl">
            AI 智能助手
          </h2>
          <p className="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
            与 AI 助手对话，获取个性化的建议和解答
          </p>
        </div>

        {/* 对话区域 */}
        <div className="bg-white shadow rounded-lg overflow-hidden">
          <div className="h-[500px] overflow-y-auto p-4 space-y-4">
            {messages.map((message, index) => (
              <div
                key={index}
                className={`flex ${
                  message.role === 'user' ? 'justify-end' : 'justify-start'
                }`}
              >
                <div
                  className={`max-w-[80%] rounded-lg px-4 py-2 ${
                    message.role === 'user'
                      ? 'bg-blue-100 text-black'
                      : 'bg-gray-100 text-black'
                  }`}
                >
                  {message.content}
                </div>
              </div>
            ))}
            {isLoading && (
              <div className="flex justify-start">
                <div className="bg-gray-100 text-gray-900 rounded-lg px-4 py-2">
                  正在思考...
                </div>
              </div>
            )}
          </div>

          {/* 输入区域 */}
          <form onSubmit={handleSubmit} className="border-t p-4">
            <div className="flex space-x-4">
              <input
                type="text"
                value={input}
                onChange={(e) => setInput(e.target.value)}
                onKeyPress={(e) => e.key === 'Enter' && handleSubmit(e)}
                placeholder="输入您的问题..."
                className="flex-1 p-2 border rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-black"
              />
              <button
                type="submit"
                disabled={isLoading}
                className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
              >
                发送
              </button>
            </div>
          </form>
        </div>

        {/* 快捷问题 */}
        <div className="mt-8">
          <h3 className="text-lg font-medium text-gray-900 mb-4">常见问题</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <button
              onClick={() => setInput('如何缓解坐骨神经痛？')}
              className="text-left p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow text-black"
            >
              如何缓解坐骨神经痛？
            </button>
            <button
              onClick={() => setInput('坐骨神经痛有哪些锻炼方法？')}
              className="text-left p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow text-black"
            >
              坐骨神经痛有哪些锻炼方法？
            </button>
            <button
              onClick={() => setInput('坐骨神经痛需要注意什么？')}
              className="text-left p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow text-black"
            >
              坐骨神经痛需要注意什么？
            </button>
            <button
              onClick={() => setInput('吃什么食物对坐骨神经痛有帮助？')}
              className="text-left p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow text-black"
            >
              吃什么食物对坐骨神经痛有帮助？
            </button>
          </div>
        </div>
      </div>
    </main>
  )
} 